type DialogData = { title: string; content: string };

export class Dialog {
    size: number;
    data: { title: string; content: string };
    resolve: () => void;
    backGround: UiBox;
    box: UiBox;
    title: UiText;
    content: UiText;
    titleBackgroundImage: UiImage;
    contentBackgroundImage: UiImage;

    constructor() {
        this.size = 0;
        this.data = { title: '', content: '' };
        this.resolve = () => null;

        this.backGround = UiBox.create();
        this.box = UiBox.create();
        this.title = UiText.create();
        this.content = UiText.create();
        this.titleBackgroundImage = UiImage.create();
        this.contentBackgroundImage = UiImage.create();

        this.init();
    }

    init(): void {
        this.size = screenWidth;

        this.backGround.parent = ui;
        this.backGround.size.offset.copy(Vec2.create({ x: 0, y: 0 }));
        this.backGround.size.scale.copy(Vec2.create({ x: 1, y: 1 }));
        this.backGround.backgroundColor.copy(Vec3.create({ r: 0, g: 0, b: 0 }));
        this.backGround.backgroundOpacity = 0.7;
        this.backGround.visible = false;

        this.backGround.events.on('pointerdown', () => {
            if (this.data.content !== this.content.textContent) {
                this.content.textContent = this.data.content;
            } else {
                this.backGround.visible = false;
                this.resolve();
            }
        });

        this.box.parent = this.backGround;
        this.box.position.scale.copy(Vec2.create({ x: 0, y: 0.7 }));
        this.box.size.scale.copy(Vec2.create({ x: 1, y: 0.3 }));
        this.box.backgroundColor.copy(Vec3.create({ r: 0, g: 0, b: 0 }));
        this.box.backgroundOpacity = 0.5;
        this.box.visible = true;

        this.content.parent = this.box;
        this.content.position.offset.copy(
            Vec2.create({ x: this.size * 0.01, y: this.size * 0.01 })
        );
        this.content.size.offset.copy(
            Vec2.create({
                x: this.size * 0.98,
                y: this.size * 0.15 - this.size * 0.02,
            })
        );
        this.content.textColor.copy(Vec3.create({ r: 255, g: 255, b: 255 }));
        this.content.backgroundOpacity = 0.5;
        this.content.textFontSize = this.size / 50;
        this.content.autoWordWrap = true;
        this.content.textXAlignment = 'Left';
        this.content.textYAlignment = 'Top';
    }

    show(data: DialogData): Promise<void> {
        input.unlockPointer();
        this.backGround.visible = true;
        this.data = data;
        const { title, content } = data;
        this.title.textContent = title;
        this.content.textContent = '';
        return new Promise<void>(async (resolve) => {
            this.resolve = resolve;
            for (let i = 0; i < this.data.content.length; i++) {
                if (this.data.content === this.content.textContent) {
                    break;
                }
                this.content.textContent += content[i];
                await sleep(46);
            }
        });
    }
}

export const dialog: Dialog = new Dialog();
